<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container" v-loading.body="loading">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">用户管理</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">筛选区</span>
                        <div style="float: right">
                            <el-button type="primary" @click.native.prevent="getList">查询</el-button>
                            <el-button type="primary" @click.native.prevent="clearSearch">清空查询条件</el-button>
                        </div>
                    </div>
                    <el-form :inline="true" ref="search" :model="search" label-width="80px">
                        <el-form-item label="用户搜索">
                            <el-input v-model="search.keyword" placeholder="姓名/手机号码"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="search.gender" style="margin-top: 10px">
                                <el-radio label="0">全部</el-radio>
                                <el-radio label="1">男</el-radio>
                                <el-radio label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">后台用户信息列表</span>
                        <el-button type="primary" style="float: right;" v-if="isPermission('user:add', user.permissions)" @click.native.prevent="addUser">添加</el-button>
                    </div>
                    <el-table
                            :data="userList"
                            border
                            style="width: 100%">
                        <el-table-column
                                inline-template
                                label="序号"
                                width="80">
                            <div>{{ $index+pageSize*(currentPage-1)+1 }}</div>
                        </el-table-column>
                        <el-table-column
                                prop="realName"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="loginName"
                                label="登录名">
                        </el-table-column>
                        <el-table-column
                                prop="tel"
                                align="center"
                                label="手机号码">
                        </el-table-column>
                        <el-table-column
                                prop="sex"
                                label="性别"
                                align="center"
                                :formatter="sexformatter">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center">
                                        <el-dropdown-item v-if="isPermission('user:edit', user.permissions)"><el-button size="mini" type="primary"  @click.native.prevent="editUser(row)">编辑</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('user:delete', user.permissions)"><el-button size="mini" type="primary"  @click.native.prevent="confirmDelete(row.id)">删除</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('user:reset', user.permissions)"><el-button size="mini" type="primary"  @click.native.prevent="resetPassword(row.id)">重置密码</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

    <el-dialog :title="dialogTitle" v-model="addUserDialogFormVisible">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">用户基本信息</span>
            </div>
            <el-form ref='addUserForm':model="addUserForm" :rules='addUserRules' label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="addUserForm.realName" placeholder="姓名" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="addUserForm.sex" style="margin-top: 10px">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码" prop="tel" label-width="100px">
                    <el-input v-model="addUserForm.tel" placeholder="手机号码" style="width: 200px;"></el-input>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card" style="margin-top: 10px">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">用户角色</span>
                <el-button type="primary" style="float: right;" @click.native="addUserRole">添加</el-button>
            </div>
            <el-table
                    :data="addUserForm.roleList"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="角色名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="desc"
                        label="角色描述">
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-dropdown>
                            <el-button type="primary">
                                操作<i class="el-icon-caret-bottom el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" align="center">
                                <el-dropdown-item>
                                    <el-button size="mini" type="primary" class="el-icon-delete" @click.native="deleteRole(scope.row.id)">删除</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div slot="footer" style="text-align: center;">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click.native.prevent="saveAddUser">保 存</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="addUserRoleDialog">
        <el-card class="box-card">
            <yiqi-transfer-list ref="roleTransfer" :lefttitle="leftTitle" :righttitle="rightTitle" :data="data" :roledata="roleData"></yiqi-transfer-list>
        </el-card>
        <div slot="footer" style="text-align: center;">
            <el-button @click="addUserRoleDialog = false">取 消</el-button>
            <el-button type="primary" @click.native.prevent="saveAddRole">保 存</el-button>
        </div>
    </el-dialog>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>

<!-- 引入vue组件 -->
<script src="/static/js/dist/vueComponents.js"></script>

<script>
    new Vue({
        el: '#app',
        methods: {
            sexformatter(row, column) {
                var sex = row.sex
                if (sex === 1) {
                    return '男'
                } else if (sex === 2) {
                    return '女'
                }
            },
            getSourceList () {
                let that = this;
                this.http("/role/list", {currentPage: 1, name: '', pageSize: 20, isAll: 1}, function (res) {
                    if (res.status === 200) {
                        that.data = res.data.list;
                    } else {
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            editUser(user) {
                let that = this
                this.dialogTitle = "编辑用户";
                this.http("/user/detail", {id: user.id}, function (res) {
                    if (res.status === 200) {
                        let data = res.data.detail
                        that.addUserForm = {
                            id: data.id,
                            realName: data.realName,
                            sex: data.sex,
                            tel: data.tel,
                            roleList: res.data.roleList,
                            roleIds: data.roleIds
                        }
                        that.roleData = res.data.detail.roleIds;
                        that.addUserDialogFormVisible = true;
                    } else {
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            addUser() {
                this.addUserForm = {
                    realName: '',
                    sex: 1,
                    tel: '',
                    roleList: []
                }
                this.roleData = [];
                this.addUserDialogFormVisible = true;
                this.dialogTitle = "添加用户";
            },
            addUserRole () {
                this.dialogTitle = "添加用户";
                this.addUserRoleDialog = true
            },
            saveAddUser() {
                var that = this
                let obj = {};
                let contentSuccess = '';
                let contentError = '';
                let url = '';
                if (this.addUserForm.id !== undefined) {
                    if(this.addUserForm.tel === ''){
                        this.$refs.addUserForm.validate(function(valid){
                        })
                        return false;
                    }else{
                        obj = {
                            id: this.addUserForm.id,
                            realName: this.addUserForm.realName,
                            tel: this.addUserForm.tel,
                            sex: this.addUserForm.sex,
                            roleIds: this.roleData
                        }
                        contentSuccess = '编辑成功';
                        contentError = '编辑失败';
                        url = '/user/update';
                    }
                } else {
                    if(this.addUserForm.tel === ''){
                        this.$refs.addUserForm.validate(function(valid){
                        })
                        return false;
                    }else{
                        obj = {
                            realName: this.addUserForm.realName,
                            tel: this.addUserForm.tel,
                            sex: this.addUserForm.sex,
                            roleIds: this.roleData
                        }
                        contentSuccess = '添加成功';
                        contentError = '添加失败';
                        url = '/user/add';
                    }
                }
                this.http(url, obj, function (res) {
                    if (res.status === 200) {
                        if(that.addUserForm.tel !== ''){
                            that.addUserDialogFormVisible = false;
                            that.$alert(contentSuccess, '提示', {
                                confirmButtonText: '确定'
                            });
                            that.getList();
                        }
                    } else {
                        that.$alert(contentError, '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    that.$alert(contentError, '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            getList() {
                var that = this;
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                var obj = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.search.keyword,
                    sex: this.search.gender
                };
                this.http("/user/list", obj, function (res) {
                    if (res.status === 200) {
                        that.loading = false;
                        that.userList = res.data.list;
                        that.totalCount = res.data.total;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            clearSearch() {
                this.search.keyword = '';
                this.search.gender = 0;
                this.currentPage = 1;
                this.getList();
            },
            handleCurrentPageChange(val) {
                this.currentPage = val;
                this.getList();
            },
            saveAddRole () {
                this.addUserForm.roleList = this.$refs.roleTransfer.roleList;
                let ids = [];
                this.addUserForm.roleList.forEach(function (item) {
                    ids.push(item.id);
                });
                this.roleData = ids;
                this.addUserRoleDialog = false;
            },
            confirmDelete(id){
                let that = this;
                this.$confirm('此操作将永久删除该项, 是否继续?', '提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(function () {
                    that.deleteUser(id)
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            deleteRole (id) {
                let newRole = [];
                newRole = this.addUserForm.roleList.filter(function (item) {
                    return item.id !== id
                });
                this.addUserForm.roleList = newRole;
                let ids = [];
                ids = this.roleData.filter(function (item) {
                    return item !== id
                });
                this.roleData = ids;
            },
            deleteUser (id) {
                let that = this;
                this.http("/user/delete", {id: id}, function (res) {
                    if (res.status === 200) {
                        that.$alert('删除成功', '提示', {
                            confirmButtonText: '确定'
                        });
                        that.getList();
                    } else {
                        that.$alert('删除失败', '提示', {
                            confirmButtonText: '确定'
                        });
                    }
                }, function (res) {
                    that.$alert('删除失败', '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            resetPassword (id) {
                let that = this;
                this.$confirm('此操作将重置密码为初始密码, 是否继续?', '提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(function () {
                    that.resetPwd(id)
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                })
            },
            resetPwd (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/user/resettingPwd", {id: id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.$alert('重置密码成功', '提示', {
                            confirmButtonText: '确定'
                        });
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定'
                    });
                })
            },
            cancel(){
                this.addUserDialogFormVisible = false;
                this.$refs.addUserForm.resetFields();
            }
        },
        data: function(){
            return {
                loading: false,
                formLabelWidth: '100px',
                addUserDialogFormVisible: false,
                addUserRoleDialog: false,
                leftTitle: '所有角色-源列表',
                rightTitle: '所有角色-目的列表',
                data: [],
                roleData: [],
                dialogTitle: '添加用户',
                addUserForm: {
                    realName: '',
                    sex: 1,
                    tel: '',
                    roleList: []
                },
                addUserRules:{
                  tel:[
                      {required:true,message:'手机号码必填',trigger:'blur'}
                  ]
                },
                isValid:true,
                search: {
                    keyword: '',
                    gender: '0'
                },
                userList: [],
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu
            }
        },
        mounted: function () {
            this.getList();
            this.getSourceList();
        }
    })
</script>

<style>
    .el-table__empty-block {
        position: relative;
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: auto;
    }
    #app {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
</style>

<!-- 20170105 --></body>
</html>